import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export const Search = () => {
  return (
    <div
      className="bg-cover bg-no-repeat bg-center lg:bg-right min-h-[513px] flex flex-col items-center justify-center"
      style={{ backgroundImage: "url('/images/banner.jpg')" }}
    >
      <div className="container mx-auto">
        <div>
          <h2 className="text-center md:text-left text-[#2392d0] text-4xl md:text-[55px] font-bold leading-normal mb-[60px]">
            {`Don't miss our daily`} <br />
            Product Cost analysis.
          </h2>

          <div className="flex flex-row items-center justify-center md:justify-start">
            <Select>
              <SelectTrigger className="w-[180px] rounded-none border-none">
                <SelectValue placeholder="All Categories" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Fruits</SelectLabel>
                  <SelectItem value="apple">Apple</SelectItem>
                  <SelectItem value="banana">Banana</SelectItem>
                  <SelectItem value="blueberry">Blueberry</SelectItem>
                  <SelectItem value="grapes">Grapes</SelectItem>
                  <SelectItem value="pineapple">Pineapple</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <Input
              type="email"
              placeholder="Search for items.."
              className="w-[300px] rounded-none border-none"
            />
            <Button type="button" className="rounded-none">
              <svg
                className="w-4 h-4"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 20 20"
              >
                <path
                  stroke="#FFFFFF"
                  strokeWidth="2"
                  d="M19 19l-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                />
              </svg>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Search;
